@home.main("") {


    <style>
            .tab-pane form {
                margin-top: 30px;
            }

    </style>

    <div class="row">
        <div class="form-group col-sm-12">
            <h2 class="page-heading"
            style="text-align: left;
                border-bottom: 5px solid #e9f3f4">Enrichment analysis</h2>
        </div>
    </div>

    <div class="row">

        <div class="tab-pane active" id="kegg">
            <form class="form-horizontal" method="get" id="form">

                <div class="form-group">
                    <label class="control-label col-sm-2">Method:</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="method" id="method">
                            <option value="kegg">KEGG</option>
                            <option value="go">GO</option>

                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <label class="control-label col-sm-2">Type of query:</label>
                    <div class="col-sm-4">
                        <select class="form-control" onchange="change(this)" name="dataType">
                            <option selected value="text">Text</option>
                            <option value="file">File</option>
                        </select>
                    </div>
                </div>


                <div class="form-group" id="queryContent">
                    <label class="control-label col-sm-2">Enter gene id:</label>
                    <div class="col-sm-8">
                        <textarea name="gene" id="gene" class="form-control" rows="5"></textarea>
                        <span class="help-block">
                            e.g.,&nbsp;<a href="#"><em id="egGene">
                            Example</em></a></span>

                    </div>
                </div>

                <div id="queryFile" style="display: none;">
                    <div class="form-group">
                        <label class="control-label col-sm-2">Upload file:</label>
                        <div class="col-sm-8">
                            <input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
                            data-show-upload="false">
                            <span class="help-block"><a href="#"><em id="egFile">
                                Example file</em></a></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2">Background:</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="db" id="db">
                            <option value="02428">02428</option>
                            <option value="9311">9311</option>
                            <option value="Basmati1">Basmati1</option>
                            <option value="CJ14">CJ14</option>
                            <option value="CN1B">CN1B</option>
                            <option value="D62B">D62B</option>
                            <option value="DG">DG</option>
                            <option value="DHX2H">DHX2H</option>
                            <option value="FH838">FH838</option>
                            <option value="FS32">FS32</option>
                            <option value="G46">G46</option>
                            <option value="Guang8B">Guang8B</option>
                            <option value="Gui630">Gui630</option>
                            <option value="II32">II32</option>
                            <option value="IR64">IR64</option>
                            <option value="J4115S">J4115S</option>
                            <option value="KY131">KY131</option>
                            <option value="lemont">lemont</option>
                            <option value="LJ">LJ</option>
                            <option value="N22">N22</option>
                            <option value="NAMROO">NAMROO</option>
                            <option value="NIP">NIP</option>
                            <option value="R3551">R3551</option>
                            <option value="R498">R498</option>
                            <option value="R527">R527</option>
                            <option value="R548">R548</option>
                            <option value="TUMBA">TUMBA</option>
                            <option value="WSSM">WSSM</option>
                            <option value="Y58S">Y58S</option>
                            <option value="YueGuang">YueGuang</option>
                            <option value="YX">YX</option>
                            <option value="ZH11">ZH11</option>

                        </select>
                    </div>
                </div>


                <div class="form-group">
                    <label class="control-label col-sm-2">P-value cutoff:</label>
                    <div class="col-sm-2">
                        <input class="form-control" name="pValue" id="pValue" value="0.05">
                    </div>
                </div>

                <div class="form-group">
                    <div class="actions col-sm-offset-2 col-sm-2">
                        <button type="button" class="btn btn-primary" style="width: 90%;" id="run" onclick="Running()">
                            Run</button>
                    </div>

                    <div class="actions  col-sm-2">
                        <button type="reset" class="btn btn-primary" style="width: 90%;">
                            Reset</button>
                    </div>
                </div>

            </form>


        </div>

    </div>

    <div id="goResult" style="display: none;">
        <hr>
        <label>Columns to display:</label>
        <div id="goCheckbox" class="checkbox" style="margin-left: 20px">

        </div>
        <div id="toolbar">
        </div>
        <div class="table-responsive panel-collapse collapse in " >
            <table class="display table table-bordered" id="goTable" data-pagination="true" data-search="true"
            data-toolbar="#toolbar" data-page-list="[10, 25]" data-search-align="left" data-multiple-search="true"
            data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
            style="word-wrap: break-word">
                <thead>
                    <tr>
                        <th data-field="id" data-sortable="true">ID</th>
                        <th data-field="enrichment" data-sortable="true">Enrichment</th>
                        <th data-field="description" data-sortable="true">Description</th>
                        <th data-field="ratio_in_study" data-sortable="true">Ratio_In_Study</th>
                        <th data-field="ratio_in_pop" data-sortable="true">Ratio_In_Pop</th>
                        <th data-field="p_uncorrected" data-sortable="true">P_Uncorrected</th>
                        <th data-field="p_bonferroni" data-sortable="true">P_Bonferroni</th>
                        <th data-field="p_holm" data-sortable="true">P_Holm</th>
                        <th data-field="p_sidak" data-sortable="true">P_Sidak</th>
                        <th data-field="p_fdr" data-sortable="true">P_Fdr</th>
                        <th data-field="namespace" data-sortable="true">Namespace</th>
                        <th data-field="genes_in_study" data-sortable="true">Genes_In_Study</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div id="keggResult" style="display: none;">
        <hr>
        <label>Columns to display:</label>
        <div id="keggCheckbox" class="checkbox" style="margin-left: 20px">

        </div>
        <div id="toolbar">
        </div>
        <div class="table-responsive panel-collapse collapse in " >
            <table class="display table table-bordered" id="keggTable" data-pagination="true" data-search="true"
            data-toolbar="#toolbar" data-page-list="[10, 25]" data-search-align="left" data-multiple-search="true"
            data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"

            style="word-wrap: break-word">
                <thead>
                    <tr>
                        <th data-field="term" data-sortable="true">Term</th>
                        <th data-field="database" data-sortable="true">Database</th>
                        <th data-field="id" data-sortable="true">ID</th>
                        <th data-field="input_num" data-sortable="true">Input number</th>
                        <th data-field="back_num" data-sortable="true">Background number</th>
                        <th data-field="p-value" data-sortable="true">P-Value</th>
                        <th data-field="correct_pval" data-sortable="true">Corrected P-Value</th>
                        <th data-field="input" data-sortable="true">Input</th>
                        <th data-field="hyperlink" data-sortable="true">Hyperlink</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <script src="@routes.Assets.at("tools/enrich.js")" type="text/javascript"></script>

}